<template>
  <view class="pageImg">
    <image class="basketImg" :src="'/pages/appliance/static/ic_iturbowash.png'"></image>
    <view class="imgBox">
      <view v-for="(item, index) in flexSprayList" :key="index">
        <view :class="type === 'flexSpray' && index === 0 ? 'contBack' : ''"> </view>
        <view class="basketType" :class="`basketType${index + 1}`">
          <view
            class="basketLogoTitle"
            :class="{ active: item.displayvalue === '强力' }"
            @click="changeFlexSpray(index, '强力')"
            >强力</view
          >
          <view
            class="basketLogoTitle"
            :class="{ active: item.displayvalue === '标准' }"
            @click="changeFlexSpray(index, '标准')"
            >标准</view
          >
          <view
            class="basketLogoTitle"
            :class="{ active: item.displayvalue === '轻柔' }"
            @click="changeFlexSpray(index, '轻柔')"
            >轻柔</view
          >
        </view>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { selectProgram } from '@/api/appliance'
import type { FlexSprayListType } from './flexSpray/flexSpray.vue'

import {
  DISHWASHER_OPTION_FLEXSPRAY,
  DISHWASHER_ENUMTYPE_FLEXSPRAY_INTENSITY_DELICATE,
  DISHWASHER_ENUMTYPE_FLEXSPRAY_INTENSITY_NORMAL,
  DISHWASHER_ENUMTYPE_FLEXSPRAY_INTENSITY_HEAVY,
  DISHWASHER_ENUMTYPE_FLEXSPRAY_TYPE_INDIVIDUAL,
  DISHWASHER_OPTION_FLEXSPRAY_FRONTLEFT,
  DISHWASHER_OPTION_FLEXSPRAY_BACKLEFT,
  DISHWASHER_OPTION_FLEXSPRAY_BACKRIGHT,
  DISHWASHER_OPTION_FLEXSPRAY_FRONTRIGHT,
} from '@/constants/Command'
import { actionDebounce, showLoading } from '@/utils/mpHelper'
import { TrackType, trackEvent } from '@/dataReport/tracks'
import { safeTrack } from '@/dataReport/dataReportUtil'
import { useI18n } from 'vue-i18n'

const i18n = useI18n()

const flexSprayEnumType = [
  {
    key: DISHWASHER_ENUMTYPE_FLEXSPRAY_INTENSITY_DELICATE,
    displayvalue: '轻柔',
  },
  {
    key: DISHWASHER_ENUMTYPE_FLEXSPRAY_INTENSITY_NORMAL,
    displayvalue: '标准',
  },
  {
    key: DISHWASHER_ENUMTYPE_FLEXSPRAY_INTENSITY_HEAVY,
    displayvalue: '强力',
  },
]

const props = defineProps<{
  haId?: string
  type: string
  programKey?: string
  programName?: string
  flexSprayList: FlexSprayListType[]
  customFlexSprayList?: FlexSprayListType[]
}>()

const flexSprayList = ref<FlexSprayListType[]>([])

watch(
  () => props.flexSprayList,
  () => {
    flexSprayList.value = props.flexSprayList
  },
  {
    deep: true,
  }
)

/**
 * 改变各个区域洗涤强度
 * @param index
 * @param value
 */
const changeFlexSpray = actionDebounce({
  call: async (index: number, value: string) => {
    let tempValue = flexSprayEnumType.find((item) => item.displayvalue === value)?.key || ''
    flexSprayList.value[index].displayvalue = value
    flexSprayList.value[index].value = tempValue

    if (props.type !== 'flexSpray') {
      uni.showLoading({
        title: i18n.t('APP.Common.Submitting.Text'),
        mask: true,
      })

      // 选中区域value
      let options = [
        {
          key: DISHWASHER_OPTION_FLEXSPRAY,
          value: DISHWASHER_ENUMTYPE_FLEXSPRAY_TYPE_INDIVIDUAL,
        },
        {
          key: DISHWASHER_OPTION_FLEXSPRAY_FRONTLEFT,
          value: flexSprayList.value[2].value,
        },
        {
          key: DISHWASHER_OPTION_FLEXSPRAY_BACKLEFT,
          value: flexSprayList.value[0].value,
        },
        {
          key: DISHWASHER_OPTION_FLEXSPRAY_BACKRIGHT,
          value: flexSprayList.value[1].value,
        },
        {
          key: DISHWASHER_OPTION_FLEXSPRAY_FRONTRIGHT,
          value: flexSprayList.value[3].value,
        },
      ]
      let res: any = null
      try {
        res = await selectProgram(props.haId || '', props.programKey || '', options)
      } catch (error) {
        res = error
      } finally {
        // 选中区域key
        let key = flexSprayList.value[index].key
        safeTrack(() => {
          let newValue = flexSprayList.value[index].value
          trackEvent(
            'select_option',
            {
              program_key: props.programKey || '',
              program_name: props.programName || '',
              select_option_key: key,
              select_option_value: newValue,
              successOrNot: res.code == 0,
              error_code: res.code,
              response_msg: res.msg,
            },
            TrackType.ApplianceDetail
          )
        })
      }

      uni.hideLoading()
    }
  },
})
function getParamsValue(key: string) {
  return flexSprayList.value.find((item) => item.key === key)?.value || ''
}
</script>
<style scoped lang="less">
/* 精控强洗 */
.pageImg {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  position: relative;
}
.imgBox {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.basketImg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9;
}
.basketTitle {
  width: 100%;
  height: 50rpx;
  font-size: 32rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #b3bac4;
  line-height: 50rpx;
  text-align: center;
  margin-bottom: 8rpx;
}

.contBack {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0rpx;
  left: 0rpx;
  right: 0rpx;
  flex-wrap: wrap;
  box-sizing: border-box;
}

.basketType {
  width: 300rpx;
  height: 276rpx;
  background: #ffffff;
  border-radius: 16rpx;
  text-align: center;
  box-sizing: border-box;
  z-index: 9;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.basketType .active {
  color: var(--primary-color);
  opacity: 1;
}

.basketType1 {
  position: absolute;
  top: 16rpx;
  left: 16rpx;
}

.basketType2 {
  position: absolute;
  top: 16rpx;
  right: 16rpx;
}

.basketType3 {
  position: absolute;
  bottom: 16rpx;
  left: 16rpx;
}

.basketType4 {
  position: absolute;
  bottom: 16rpx;
  right: 16rpx;
}
.basketLogoTitle {
  width: 100%;
  font-weight: 500;
  font-size: 32rpx;
  line-height: 44rpx;
  color: var(--dark-color);
  opacity: 0.8;
}
</style>
